<html lang="en">
    
    <head>
        <title>SpriteBot</title>
        
        <SCRIPT TYPE="text/javascript" SRC="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js" djConfig="parseOnLoad:true, isDebug:false, debugContainerId: 'debugContainer'"></SCRIPT>
        <script type="text/javascript" src="functions.js"></script>
        
        <style type="text/css">
			@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css";
			@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/soria/soria.css"
		</style>
        
        <link rel="stylesheet" href="main.css" />
        
		<script type="text/javascript">
			// *** Dojo Requires
			dojo.require("dojo.parser");
			dojo.require("dojo.data.ItemFileWriteStore");
            dojo.require("dojo.dnd.Source");
            dojo.require("dijit.Dialog");
            dojo.require("dijit.form.Button");
			dojo.require("dijit.Tree");
			
			var store;
            var imageList;

			// *** Dojo Init
			dojo.addOnLoad( function() {
				console.log("** Dojo initializing");
                
                imageList = new dojo.dnd.Source("imageList", {creator: imageListCreator});
                
				store = new dojo.data.ItemFileWriteStore({ url: "getFS2.php" });

				var treeModel = new dijit.tree.TreeStoreModel({
					store: store,
					query: {"type" : "folder"},
					rootId: "root",
					rootLabel: "Root",
					//onNewItem: function( item, parentInfo ) { console.dir(item); console.dir(parentInfo); }
					childrenAttrs: ["children"]
				});

				var myTree = new dijit.Tree({
					model: treeModel
				}, "myTree");
                dojo.connect( myTree, "onClick", showImagePreview );
                dojo.connect( myTree, "onDblClick", function( item, widget ) {
                    var test = imageList.insertNodes(false, [{data: item}]);
                });
            
                dojo.fadeOut({
                    node: "preloader",
                    onEnd: function(){
                        dojo.style("preloader", "display", "none");
                    }
                }).play();
                
            });
                       
        </script>
        
    </head>
    
    <body class="soria">

        <div id="preloader"></div>
        
        <div id="treeContainer">
            <div id="myTree"></div>
        </div>
        
        <div id="selectionContainer">
            <b>Image Preview:</b><br />
            <center><img style="padding: 5px 5px; border: 1px solid #888;" id="img_Preview" src="" /></center>
            <br /><hr>
            <b>Selected Images:</b><br />
            <ul id="imageList" class="container">
            </ul>
        </div>
        
        <div id="optionsContainer">
            <b>Options</b><br />
            <p />
            <hr>
            <button dojoType="dijit.form.Button" id="createButton" onClick="generateSheet();return false;">Create</button>
        </div>
        
        <div id="outputContainer">
            <b>Result:</b><br />
            <center>
                <img id="outputImage" style="padding: 5px 5px; border: 1px solid #888;" src="" />
            </center>
			<br />
			<b>CSS:</b><br />
			<textarea cols=130 rows=10 id="cssOutput"></textarea>
        </div>
            
    </body>
    
</html>
